/**
* @description : 人员选择-带部门
* @descriptionDetail : 人员选择-带部门
* @copyright : 浙江烟草
* @author : mc
* @create : 2022-12-05 16:23:09
*/
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" backColor="#2b85e4" title="人员选择">
			<view class="nav-right-icon" @tap="onSure">
				确定
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<!-- <fab-button :content="fContent" @fabtrigger="fabtrigger" /> -->
		<!-- #endif -->
		<view class="content">
			<view class="content_item" :style="{paddingLeft: (5 * item.layerIdx) + 'rpx'}" v-for="item in orgs" :key="item.id">
				<u-checkbox :name="item.id" :shape="singleChoice == 1 ? 'circle':'square'" v-model="item.checked" @change="checkboxChange"></u-checkbox>
				<view class="content-title u-font-32" @click="toNextOrg(item)">
					{{ item.name }}
				</view>
				<u-icon name="arrow-right" :size="30" :color="$theme.font_color_disabled" v-if="item.iconSkin != 'person'"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import commonApi from "@/service/common/common.service";
	import fabButton from '@/components/uni-fab.vue';

	/**
	 * 部门选择
	 * 可以限制单选、多选，可选的层级
	 */
	export default {
		components: {
			fabButton
		},
		onLoad(opt) {
			this.treeType = opt.treeType;
			this.singleChoice = opt.singleChoice;
			this.maxCount = opt.maxCount;
		},
		data() {
			return {
				singleChoice: 0,
				maxCount: 999,
				treeType: "", // zm-case
				user: this.$storage.get(this.$rp.common.USER).user,
				orgs: [{
						name: "1111",
						id: "11",
						checked: false,
						layerIdx: 0,
						pId: "0",
					},
					{
						name: "2222",
						id: "22",
						checked: false,
						layerIdx: 0,
						pId: "0",
					},
					{
						name: "3333",
						id: "33",
						checked: false,
						layerIdx: 0,
						pId: "0",
					},
					{
						name: "4444",
						id: "44",
						checked: false,
						layerIdx: 0,
						pId: "0",
					},
				], // 所有部门数据
				selectItems: [], // 选中的部门
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		mounted() {
			let org = this.user.org;
			// this.init();
		},
		methods: {
			init() {
				// 查询所在部门数据
				commonApi.userTree(undefined, this.treeType).then(dr => {
					if (dr.success) {
						dr.data.forEach(a => {
							a.layerIdx = 0;
							a.checked = false;
						});
						this.orgs = dr.data;
					}
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				if (e.value) {
					if (this.getIndexBySelectItem(e.name) == -1) {
						let op = this.getOrgById(e.name);
						if (op != null) {
							if (this.singleChoice == 1) {
								this.selectItems = [];
								this.selectItems.push(op);
							} else {
								if (this.selectItems.length >= this.maxCount) {
									this.$api.toast('最多选择' + this.maxCount + '个');
								} else {
									this.selectItems.push(op);
								}
							}
						}
					}
				} else {
					let idx = this.getIndexBySelectItem(e.name);
					if (idx != -1) {
						this.selectItems.splice(idx, 1);
					}
				}
				this.updateCheckedList();
			},
			getIndexBySelectItem(k) {
				for (let i = 0; i < this.selectItems.length; i++) {
					if (this.selectItems[i].id == k) {
						return i;
					}
				}
				return -1;
			},
			getOrgById(id) {
				for (let i = 0; i < this.orgs.length; i++) {
					if (this.orgs[i].id == id) {
						return this.orgs[i];
					}
				}
				return null;
			},
			updateCheckedList() {
				let self = this;
				this.$nextTick(function() {
					self.orgs.map(itm => {
						if (self.getIndexBySelectItem(itm.id) > -1) {
							itm.checked = true;
						} else {
							itm.checked = false;
						}
					});
				})
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				let self = this;
				this.$deviceApi.setRight("确定", () => {
					self.onSure();
					self.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.onSure();
				}
			},
			toNextOrg(obj) {
				if (!obj.children || obj.children.length == 0) {
					this.fetchUser(obj);
					return false;
				}
				if (this.hasOpened(obj.id)) {
					// 表示已经打开，点击则收起
					for (let i = 0; i < this.orgs.length; i++) {
						if (this.orgs[i].pId == obj.id) {
							this.orgs.splice(i--, 1);
						}
					}
				} else {
					// 表示本次展开
					let idx = this.getIndexByOrgs(obj.id);
					if (idx != -1) {
						obj.children.forEach(itx => {
							itx.layerIdx = obj.layerIdx + 1;
							this.orgs.splice(++idx, 0, itx);
						});
					}
				}
			},
			getIndexByOrgs(id) {
				for (let i = 0; i < this.orgs.length; i++) {
					if (this.orgs[i].id == id) {
						return i;
					}
				}
				return -1;
			},
			hasOpened(id) {
				for (let i = 0; i < this.orgs.length; i++) {
					if (this.orgs[i].pId == id) {
						return true;
					}
				}
				return false;
			},
			fetchUser(org) {
				// 如果点的是人就用再去查询了
				if (org.iconSkin === 'person') {
					return false;
				}
				let self = this;
				this.$modal.showLoading('加载中...');
				commonApi.userTree(org.id, this.treeType).then(dr => {
					this.$modal.hideLoading();
					if (dr.success) {
						org.children = dr.data;
						let idx = self.getIndexByOrgs(org.id);
						if (idx != -1) {
							org.children.forEach(itx => {
								itx.layerIdx = org.layerIdx + 1;
								itx.checked = false;
								self.orgs.splice(++idx, 0, itx);
							});
						}
					} else {
						self.$modal.alert('请求失败 ' + dr.msg);
					}
				}).catch(reason => {
					this.$modal.hideLoading();
					self.$modal.alert('加载失败');
				});
			},
			// 点击确定
			onSure() {
				if (this.selectItems.length == 0) {
					this.$api.toast('请选择');
					return;
				}
				this.backPrev({
					paramKey: "choicePerson",
					param: this.selectItems,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.nav-right-icon {
		padding-right: 15px;
		color: #FFF;
	}

	.content {
		padding: 10px 20px 10px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content_item {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 20rpx;
		margin: 20rpx;
		border-bottom: 1px solid $u-border-color;
	}

	.content-title {
		flex-grow: 1;
	}
</style>
